<template>
  <div class="case">
    <div class="case-left-side">
      <happy-scroll color="rgba(0,0,0,0.5)" size="5">
        <div>
          <el-select
            v-model="radius"
            placeholder="请选择报警范围"
            style="width: 97%"
            @change="getDistance"
          >
            <el-option label="100米以内" value="100"> </el-option>
            <el-option label="200米以内" value="200"> </el-option>
            <el-option label="300米以内" value="300"> </el-option>
          </el-select>
          <div class="fuse-title">基本信息</div>
          <p class="tit">
            传感器类型：<span>{{ sensorForm.ssTransducerTypeName }}</span>
          </p>
          <p class="tit">
            传感器名称：<span>{{ sensorForm.ssTransducerPoint }}</span>
          </p>
          <p class="tit">
            传感器实时值：<span
              >{{ sensorForm.ssTransducerValue }}{{ sensorForm.company }}</span
            >
          </p>
          <p class="tit">
            传感器实时状态：<span>{{ sensorForm.ssTransducerStatusName }}</span>
          </p>
          <p class="tit">
            传感器报警值：<span
              >{{ sensorForm.alarmValue }}{{ sensorForm.company }}</span
            >
          </p>
          <p class="tit">
            传感器报警时间：<span>{{ sensorForm.alarmTime }}</span>
          </p>
          <p class="tit">
            带班领导位置：<span>{{ sensorForm.psStationLocation }}</span>
          </p>
          <div class="fuse-title">安全环境</div>
          <!-- <i class="iconfont">&#xe66e;</i> -->
          <div class="case-substance">
            <happy-scroll color="rgba(0,0,0,0.5)" size="5">
              <el-table :data="tableData" class="backtable">
                <el-table-column label="序号" width="50" align="center">
                  <template slot-scope="scope">
                    <span style="margin-left: 10px">{{
                      scope.$index + 1
                    }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="ssTransducerPoint"
                  label="监测点"
                  show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column
                  prop="ssTransducerTypeName"
                  label="类型"
                  show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column
                  prop="ssTransducerValue"
                  label="报警值"
                  show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column
                  prop="ssTransducerValue"
                  label="最大值"
                  show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column
                  prop="csDataTime"
                  label="时间"
                  show-overflow-tooltip
                >
                </el-table-column>
              </el-table>
            </happy-scroll>
          </div>
          <div class="fuse-title">人员</div>
          <div class="case-substance">
            <happy-scroll color="rgba(0,0,0,0.5)" size="5">
              <el-table :data="personData" class="backtable">
                <el-table-column label="序号" width="50" align="center">
                  <template slot-scope="scope">
                    <span style="margin-left: 10px">{{
                      scope.$index + 1
                    }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="psPersonName"
                  label="姓名"
                  show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column
                  prop="psPersonDept"
                  label="部门"
                  show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column
                  prop="psStationLocation"
                  label="位置"
                  show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column label="轨迹回放" show-overflow-tooltip>
                  <template slot-scope="">
                    <i class="iconfont">&#xe610;</i>
                  </template>
                </el-table-column>
              </el-table>
            </happy-scroll>
          </div>
        </div>
      </happy-scroll>
    </div>
    <div class="case-middle-side"></div>
    <div class="case-right-side">
      <happy-scroll color="rgba(0,0,0,0.5)" size="5">
        <div>
          <div class="fuse-title">调度电话</div>
          <div class="case-substance">
            <happy-scroll color="rgba(0,0,0,0.5)" size="5">
              <el-table :data="phoneData" class="backtable">
                <el-table-column label="序号" width="50" align="center">
                  <template slot-scope="scope">
                    <span style="margin-left: 10px">{{
                      scope.$index + 1
                    }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="dtAddress"
                  label="地点"
                  show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column
                  prop="dtStatus"
                  label="状态"
                  show-overflow-tooltip
                >
                  <template slot-scope="scope">
                    {{ scope.row.dtStatus == 1 ? '在线' : '停用' }}
                  </template>
                </el-table-column>
                <el-table-column
                  prop="dtPhone"
                  label="号码"
                  show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column
                  prop="psPersonCard"
                  label="操作"
                  show-overflow-tooltip
                >
                  <template slot-scope="">
                    <el-button type="text" size="mini"
                      ><i class="el-icon-phone-outline"></i
                    ></el-button>
                  </template>
                </el-table-column>
              </el-table>
            </happy-scroll>
          </div>
          <div class="fuse-title">广播</div>
          <div class="case-substance">
            <happy-scroll color="rgba(0,0,0,0.5)" size="5">
              <el-table :data="airData" class="backtable">
                <el-table-column label="序号" width="50" align="center">
                  <template slot-scope="scope">
                    <span style="margin-left: 10px">{{
                      scope.$index + 1
                    }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="broadcastAddress"
                  label="地点"
                  show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column
                  prop="broadcastStatus"
                  label="状态"
                  show-overflow-tooltip
                  width="70px"
                >
                  <template slot-scope="scope">
                    {{ scope.row.broadcastStatus == 1 ? '在线' : '停用' }}
                  </template>
                </el-table-column>
                <el-table-column prop="" label="操作" show-overflow-tooltip>
                  <template slot-scope="">
                    <el-button type="text" size="mini"
                      ><i class="iconfont">&#xe604;</i></el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
            </happy-scroll>
          </div>
          <!-- <div class="fuse-title">群发广播</div>
          <el-form :model="airform" ref="airform">
            <el-form-item label="">
              <el-input type="textarea" v-model="airform.desc" placeholder="请输入广播内容" style="height:120px"></el-input>
            </el-form-item>
          </el-form>
          <el-button type="primary" style="width:380px;margin-bottom:20px;">提交</el-button> -->
        </div>
      </happy-scroll>
    </div>
  </div>
</template>

<script>
import store from '@/store'
export default {
  data() {
    return {
      radius: '100',
      alarmId: null,
      sensorForm: {
        ssTransducerTypeName: null,
        ssTransducerPoint: null,
        ssTransducerValue: null,
        ssTransducerStatusName: null,
        alarmValue: null,
        company: null,
        alarmTime: null,
        psStationLocation: null
      },
      tableData: [],
      personData: [],
      phoneData: [],
      airData: [],
      airform: {
        desc: null
      },
      safeEmergencyList: null
    }
  },
  watch: {
    safeEmergencyList() {
      console.log('hahat', this.safeEmergencyList)
      this.safelist()
    }
  },
  mounted() {
    window.addEventListener('message', messageEvent => {
      var data = messageEvent.data
      this.safeEmergencyList = data
    })
  },
  methods: {
    getDetails() {
      this.alarmId = this.$route.params.alarmId
      this.$http
        .get('/safe/safeEmergency?alarmId=' + this.alarmId)
        .then(res => {
          res = res.data
          if (res.code == 200) {
            this.sensorForm = res.data.trans
            this.sensorForm.alarmValue = res.data.alarmValue
            this.sensorForm.alarmTime = res.data.alarmTime
            this.sensorForm.psStationLocation =
              res.data.leader.psStationLocation
            this.phoneData = res.data.phoneList
            this.airData = res.data.broadcastsList
          }
        })
    },

    getSceneDetails(item) {
      const mapFrame = this.$refs['mainIframe']
      const iframeWin = mapFrame.contentWindow
      iframeWin.postMessage({ scene: item.id }, '*')
    },
    getDistance(value) {
      store.commit('getstationCode')
      store.commit('getsensorCode')
      var stationCode = store.state.gis.stationCode
      var sensorCode = store.state.gis.sensorCode
      this.$store.commit('Distance', {
        distance: value,
        stationCode: stationCode,
        sensorCode: sensorCode
      })
    },
    safelist() {
      this.tableData = []
      this.personData = []
      this.$http
        .post('/safe/safeEmergencyDetail', {
          personArr: this.safeEmergencyList.man,
          transArr: this.safeEmergencyList.sensor
        })
        .then(res => {
          res = res.data
          if (res.code == 200) {
            this.tableData = res.data.transList
            this.personData = res.data.personList
          }
        })
    }
  },
  created() {
    this.getDetails()
  }
}
</script>

<style lang="scss">
.tit {
  line-height: 40px;
}
.el-textarea__inner {
  height: 120px;
}
</style>
